<template>
  <div class="exchange">
    <div class="exchange_bottom">
      <p>兑换数量 <span @click="tuichuClick">[切换登录]</span></p>
      <input type="text" :placeholder="ke" v-model="num" />
      <div @click="exchangeClick">确认兑换</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Toast } from 'vant'
import { getCookie } from '@/util/cookie'
import { userBalanceDiamond, userUserInfo } from '@/api/recharge'
import { useRouter, useRoute } from 'vue-router'
import 'vant/lib/index.css'
export default defineComponent({
    setup() {
        const router: any = useRouter()
        const route: any = useRoute()
        const data = reactive<Record<string, any>>({
            userId: getCookie("userId"),
            token: getCookie("token"),
            username: '',
            num: '',
            paypassword: '',
            tototoId: getCookie("userId"),
            goalInfo: '',
            ke: '可兑换0积分',
            money: '',
            zhuanShow: '',
            morenPic: '',
            tomoney: ''
        })
        const tuichuClick = (): void => {
            document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            document.cookie = "openId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
            data.userId = "";
            data.token = "";
            data.username = "";
            router.push({
                path: '/login',
                query: {
                    reductName: route.path
                }
            });
        }
        const exchangeClick = (): void => {
            if (data.num) {
                okexchangeClick();
            } else {
                Toast(" 请输入兑换金额");
            }
        }
        const okexchangeClick = async (): Promise<void> => {
            let params = {
                userId: data.userId,
                memberId: data.tototoId,
                payPassword: data.paypassword,
                num: data.num,
                token: data.token,
            };
            const dataRes = await userBalanceDiamond(params)
            Toast(dataRes.data.text);
            setTimeout(() => {
                getZuan();
            }, 500);
        }
        const getZuan = async (): Promise<void> => {
            const params = {
                userId: data.userId,
                token: data.token,
            }
            const dataRes = await userUserInfo(params)
            data.num = "";
            if (dataRes.data.status == 0) {
                data.goalInfo = dataRes.data.result.user;
                data.username = dataRes.data.result.user.nickname;
                data.money = dataRes.data.result.user.wagesMoney;
                data.ke = "可兑换" + dataRes.data.result.user.wagesMoney + "积分";
                if (data.zhuanShow) {
                    data.morenPic = dataRes.data.result.user.headPic;
                    data.tomoney = dataRes.data.result.user.nickname;
                }
            } else {
                // location.reload();
            }
        }
        if (!data.token) {
            router.push({
                path: '/login',
                query: {
                    reductName: route.path
                }
            })
        }
        getZuan()
        return {
            exchangeClick,
            tuichuClick,
            ...toRefs(data)
        }
    },
})
</script>

<style lang="less" scoped>
@import './ExchangeComponent.less';
</style>